<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <ul>
        <li v-for="item in list">{{item.name}}</li>
      </ul>
      <button @click="modify">修改</button>
    </div>
    <script type="text/javascript" src="js/vue.js"></script>
    <script type="text/javascript">
      var vm = new Vue({
        el: "#app",
        data: {
          list: [
            {
              name: "zhangsan",
              age: 19,
            },
            {
              name: "lisi",
              age: 22,
            },
          ],
        },
        methods: {
          modify: function () {
            // this.list[1] = {
            //   name: "maotai",
            //   age: 22,
            // };
            this.list[1].name = "maotai";
          },
        },
      });
      // 点击修改的按钮, 观察界面,有数据响应式的效果吗?
      // 不是说, 通过索引修改数组元素, 没有数据的响应式吗?
      //
      /**
    如果代码是: 
    this.list[1] = {
      name: 'maotai',
      age: 22
    }
    这种会有数据的响应式吗 ---不起作用
    **/
    </script>
  </body>
</html>
